/**
 * 开店星新零售管理系统
 * @description 基于Yii2+Vue2.0+uniapp研发，H5+小程序+公众号全渠道覆盖，功能完善开箱即用，框架成熟易扩展二开
 * @author 青岛开店星信息技术有限公司
 * @link https://www.kaidianxing.com
 * @copyright Copyright (c) 2020-2022 Qingdao ShopStar Information Technology Co., Ltd.
 * @copyright 版权归青岛开店星信息技术有限公司所有
 * @warning Unauthorized deletion of copyright information is prohibited.
 * @warning 未经许可禁止私自删除版权信息
 */
<template>
    <page-box ref='pageBox' showDiymenu>
        <div class="cart-index flex-column">
            <block v-if="list.length > 0">
                <view class="edit" @click="edit">{{ !editStatus ? '编辑' : '完成'}}</view>
                <view class="container flex-column">

<!--                        <div class="goods-single-box" v-for="(item, index) in list" :key="item.id">-->
                    <div class="goods-single-box">
                        <block v-for="(item,itemIndex) in list" :key="itemIndex">
                            <view class="goods-content-box" v-if="item.goods && item.goods.length">
                                <goods-card :list.sync="item.goods"
                                            :editStatus="editStatus"
                                            :parentIndex="itemIndex"
                                            @getList="getList"
                                            @editRadioChange="editRadioChange"
                                            @on-choose="clickBuyBtn">
                                </goods-card>
                            </view>
                        </block>
                    </div>
                </view>
            </block>
            <!-- 失效商品 -->
            <view v-if="loseList.length >0" class="lose-main">
                <view class="lose-container">
                    <view class="lose-header">
                        <view class="lose-header-left">失效商品({{loseList.length}})</view>
                        <view class="lose-header-right" @click="clearLoseGoods">清空失效商品</view>
                    </view>
                    <view class="lose-content">
                        <goods-card :list="loseList"  @getList="getList"></goods-card>
                    </view>
                </view>
            </view>
            <block v-else-if="!requestFlag && list.length === 0 && loseList.length == 0">
                <!-- 缺省页 -->
                <view class="default-page flex-column">
                    <view class="bg">
                        <image :src="$utils.staticMediaUrl('default/cart.png')"></image>
                    </view>
                    <view class="default-text">购物车竟然是空的</view>
                    <div class="ib">
                        <btn styles="padding:0 60rpx;margin-top:32rpx" classNames="theme-primary-border theme-primary-color" :ghost="true" size="middle" @btn-click="toIndex">去逛逛</btn>
                    </div>
                </view>
                <!-- 猜你喜欢 -->
                <goods-like></goods-like>
            </block>
        </div>
        <template slot="foot">
            <!-- 底部结算 -->
            <cart-footer v-if="list.length > 0"
                         slot="foot"
                         :editStatus="editStatus"
                         :express_enable="express_enable"
                         :list="list"
                         :footerObj="footerObj"
                         @getList="getList"
                         @create="preCreate"
                         @allSelectedRadioChange="allSelectedRadioChange">
            </cart-footer>
        </template>
        <!-- 多规格选择 -->
        <goods-picker
            ref="goodsPicker"
            @custom-event="customEventHandler"
        ></goods-picker>
        <!-- 删除失效商品 -->
        <rr-modal v-model="showModal" title="提示" ok-text="确定" cancel-text="取消" @handlerOK="modalOk" @handlerCancel="modalCancel">
            <template slot="content">
                <view class="pay-modal-content">确认清空当前失效商品？</view>
            </template>
        </rr-modal>
        <!-- 配送方式选择 -->
        <cart-delivery title="选择结算商品" v-if="mixModal" @on-close="handleCancel">
            <delivery-goods v-if="mixDelivery.express.total" type="express" :info="mixDelivery.express" @create="preCreate"></delivery-goods>
        </cart-delivery>

    </page-box>

</template>

<script>
    import goodsCard from './components/GoodsCard'
    import cartFooter from './components/CartFooter'
    import goodsLike from './components/goods/GoodsLike'
    import PageMixin from '@/common/PageMixin.js'
    import PageLoadingMixin from "@/common/LoadingBox/PageLoadingMixin"
    import goodsPicker from "@/components/goods/GoodsPicker";
    import CartAdder from '@/components/goods/addCartTools.js'
    import CartDelivery from './components/CartDelivery'
    import DeliveryGoods from './components/DeliveryGoods.vue'

    export default {
        mixins: [PageMixin,PageLoadingMixin],
        components: {
            goodsCard,
            cartFooter,
            goodsLike,
            goodsPicker,
            CartDelivery,
            DeliveryGoods
        },
        props: {},
        data() {
            return {
                editStatus: false, // 控制编辑/完成
                footerObj: {},
                list: [],
                requestFlag: false,
                dispatch_express: '0', // 快递
                express_enable: 0, // 快递是否开启
                processList: [], // 处理数据结构
                cartAdder:null,//添加购物车类对象
                showModal: false, // 清空
                loseList: [], // 失效商品列表

                mixDelivery: { // 配送方式混合支付信息
                    express: {total: 0,total_price:0,list:[]},
                },
                mixModal: false

            }
        },
        computed: {
            backgroundImage() {
                return {
                    'background-image':`url(${this.$utils.staticMediaUrl('decorate/logo_default.png')})`
                }
            }
        },
        watch: {
            // #ifdef H5
            '$Route.path': {
                handler(path){
                    // 路由切换 清空购物车快速购买信息
                    if(path !== '/pagesCart/index') {
                        this.$store.commit('quickPurchase/setCartChooseInfo',null)
                    }
                },
            }
            // #endif
        },
        // #ifndef H5
        onUnload() {
             this.$store.commit('quickPurchase/setCartChooseInfo',null)
        },
        // #endif
        onShow(){
            // 刷新购物车数量
            this.$decorator.getModule('diymenu').getCartNum(true)
            this.requestFlag = true;
            this.getList()
        },
        mounted() {
            this.cartAdder=new CartAdder((e)=>{//商品组加购专用//快速购买处理
                if(e.type=='toggle'){
                    this.$refs?.goodsPicker.toggle(this.cartAdder.pickerCallback, e.data?.type);
                    if(!this.$refs.goodsPicker.showmodal&&e.data.errorInfo){
                        this.$toast(e.data.errorInfo)
                    }
                }
            });

        },
        methods: {
            async pullDownRefresh() {//下拉刷新，mixin.js中调用
                // uni.showLoading({
                //     title: '正在刷新',
                // })
                this.requestFlag = true;
                this.getList()
            },
            //编辑or完成
            edit() {
                this.editStatus = !this.editStatus;
                // 清空之前编辑的选中状态
                this.list.forEach(item => {
                    item.editStatus = false
                });
            },
            // 编辑选中/取消选中
            editRadioChange(index, merchantId, type) {
                this.list[merchantId].goods[index].editStatus = !this.list[merchantId].goods[index].editStatus
            },
            // 编辑全选开关
            allSelectedRadioChange(status) {
                this.list.forEach(item => {
                    item.goods.forEach(cItem=> {
                        cItem.editStatus = status
                    })
                })
            },
            getList() {
                // uni.showLoading({title: '加载数据'});
                this.$api.goodApi.cartList().then((res) => {
                    this.requestFlag = false;
                    this.$loading.hideLoading();
                    // uni.hideLoading();
                    if (res.error == 0) {
                        this.list = this.handleList(res, res.list);
                        this.loseList = res.lose_list || []
                        console.log('list', res.list, this.list)
                        this.footerObj = {
                            selected_num: res.selected_num, //选中商品数量
                            selected_goods: res.selected_goods, //选中商品
                            all_selected: res.all_selected, //是否全选
                            total_price: res.total_price, //总价
                        };
                        this.$decorator.getModule('diymenu').getCartNum()
                        this.$closePageLoading()
                    } else {
                        this.$toast(res.message)
                        setTimeout(() => {
                            this.$closePageLoading()
                        }, 1500)
                    }
                }).catch(() => {
                    uni.hideLoading()
                    this.$closePageLoading()
                })
            },
            handleList(data, list) {
                // 单店铺的商品信息放到了goods里面
                if (list?.length && !list[0].goods) {
                    list = [
                        {
                            goods: list
                        }
                    ]
                }
                list.forEach(item => {
                    item.goods.forEach(goods => {
                        goods.editStatus = false // 控制编辑选中
                    })
                });
                this.processList = [...list]
                return list
            },
            toIndex() {
                this.$Router.auto({
                    //#ifndef H5
                    path: '/pages/index/index',
                    //#endif
                    //#ifdef H5
                    path: '/'
                    //#endif
                })
            },
            // 订单预提交  @params list为购物车弹窗提交
            preCreate(goods_id, type,list){
                let is_origin;
                this.validteDelivery(goods_id, type,is_origin)

            },
            // 校验所选快递是否支持
            validteDelivery(goods_id,type,is_origin){
                let params = { goods_id }
                if(type) {
                    params = {...params, type, is_pop: '1'}
                }
                this.$api.orderApi.preOrderCreate(params, {errToast: false}).then(res=> {
                    if(res.error == 0){
                        if(res.is_success == 1){
                            this.saveDelivery(res.dispatch_type,type,is_origin)
                        } else {
                            this.handleMixInfo(res)
                        }
                    } else {
                        this.mixModal = false
                        setTimeout(() => {
                            this.$toast('商品信息变更')
                        }, 500);
                        this.getList()
                    }
                })
            },
            // 处理结算方式
            handleMixInfo(res){
                let {count_info = {}, goods_data = {}} = res
                this.resetMixInfo()
                Object.keys(count_info).forEach(key=> {
                    this.mixDelivery[key] = {
                        ...this.mixDelivery[key],
                        list: goods_data[key] || [],
                        total: count_info[key]?.total || 0,
                        total_price: count_info[key]?.total_price||0
                    }
                })
                this.mixModal = true
            },
            resetMixInfo(){
               this.mixDelivery = { // 配送方式混合支付信息
                    express: {total: 0,total_price:0,list:[]},
                }
            },
            // 保存支持快递方式
            saveDelivery(dispatch_type = [], type,is_origin){

                if(dispatch_type.length == 0) {
                    this.$toast('没有可用的配送方式')
                    return
                }

                let dispatchStatus = {
                    dispatch_express: '0',
                    express_enable: '0'
                }

                let opt = {
                    'express': ['dispatch_express', 'express_enable'],
                }
                // 选择推荐配送方式的某一项
                if(type) {
                    opt[type].forEach(key=> {
                        dispatchStatus[key] = '1'
                    })
                } else {
                    // 使用支持的方式
                    dispatch_type.forEach(key=> {
                        opt[key].forEach(item => {
                            dispatchStatus[item] = '1'
                        })
                    })
                }
                // 保存可以使用的配送方式
                this.$store.commit('orderCreate/setDispatchStatus', dispatchStatus)
                this.create(is_origin)
            },
            create(is_origin) {
                if(this.mixModal) {
                    this.mixModal = false
                }
                let goodsInfo = []
                // 存储store
                this.$store.commit('orderCreate/setGoodsInfo', goodsInfo)

                this.$store.commit('form/resetForm')
                // 确认订单页面

                let query = {
                    is_cart: 1
                }
                // 原价购买
                if(is_origin) {
                    query.is_origin = is_origin
                }
                this.$Router.auto({
                    path: '/kdxOrder/create',
                    query
                })
            },
            chooseShop(data) {
                // 判断购买权限
                if (this.getDisabled(data)) {
                    return
                }
                let args = {
                    select_all: 0
                };
                args.id = data.map(item => item.id);
                this.$api.goodApi.selectCart(args).then(res => {
                    if (res.error != 0) {
                        uni.showToast({
                            title: res.message,
                            icon: 'none'
                        });
                        return;
                    }
                    this.getList()
                })
            },
            async clickBuyBtn({goods_id,id}){
                await this.$store.dispatch('quickPurchase/checkLoginStatus')
                // 获取商品详情
                this.$store.commit('quickPurchase/setCartChooseInfo',{is_reelect:'1',id})

                this.cartAdder.getGoodDetail(goods_id,'cart/clickBuyBtn').then((res) => {
                    if (res.error === 0) {
                        // 打开goodsPicker
                        this.cartAdder.callback({
                            type: 'toggle',
                            data: {
                                type: 'add'
                            },
                        })
                    }
                })
            },
            async customEventHandler(e) {//快速购买处理
                await this.cartAdder.pickerCallback(e)
                if (e.type === 'clickBtn') {
                    this.$refs?.goodsPicker.toggle(); // 购物车添加成功关闭弹窗
                    this.getList()
                }

            },
            // 清除失效商品
            clearLoseGoods(){
                this.showModal = true;
            },
            // 确认清除失效商品
            modalOk(){
                let id =  this.loseList.map(item => item.id)
                this.$api.goodApi.removeLose({id}).then(res=> {
                    if(res.error === 0) {
                        this.getList()
                        this.showModal = false;
                    }
                })
            },
            // 操作取消
            modalCancel(){
                this.showModal = false;
            },
            getDisabled(data){
                // 1.商品规格变更 2.库存为0 3.权限变更
                return data?.some(item => item.is_reelect == '1' || item.stock == '0' || item.buy_perm == '0' || item.is_lose_efficacy == '1')
            },
            handleCancel(){
                this.mixModal = false
            },
        },
    }
</script>

<style lang="scss">
    .cart-index {
        height: 100%;
        background-color: #f5f5f5;
        box-sizing: border-box;
        padding-bottom: px2rpx(66);
        .container {
            box-sizing: border-box;
        }
        .edit {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            text-align: right;
            font-size: 28rpx;
            color: $uni-text-color;
            padding-right: 48rpx;
        }
        .shop-item-box {
            margin-bottom: px2rpx(8);
            &:last-child {
                margin-bottom: 0;
            }
            .shop-item {
                padding: px2rpx(10) px2rpx(8);
                margin: 0 px2rpx(12);
                display: flex;
                align-items: center;
                background-color: #fff;
                border-radius: 12rpx 12rpx 0 0;
                font-size: px2rpx(14);
                .shop-logo {
                    margin-right: px2rpx(8);
                    width: px2rpx(24);
                    height: px2rpx(24);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
                .shop-img {
                    width: px2rpx(24);
                    height: px2rpx(24);
                    border-radius: 50%;
                }
                .self-label {
                    margin-right: px2rpx(4);
                    padding: px2rpx(1) px2rpx(3);
                    line-height: px2rpx(12);
                    background: linear-gradient(132.57deg, #FF3C29 0%, #FF6F29 94.38%);
                    color: #fff;
                    font-size: px2rpx(9);
                    font-weight: 600;
                    border-radius: px2rpx(2);
                }
                .shop-name {
                    line-height: 20px;
                }
            }
            .radio-box {
                padding-right: 18rpx;
                align-items: center;
                .iconfont-m- {
                    font-size: px2rpx(24);
                    line-height: px2rpx(24);
                    color: $uni-border-color;
                }
                .icon-m-yes {
                    font-size: px2rpx(24);
                    line-height: px2rpx(24);
                    text-align: center;
                    border-radius: 50%;
                    color: $uni-color-primary;
                }
                .disalbed-icon {
                    height: px2rpx(18);
                    width: px2rpx(18);
                    border-radius: 50%;
                    margin: px2rpx(3);
                    background:#f5f5f5;
                    border: px2rpx(1) solid #E6E7EB;
                }
            }
        }
        .goods-content-box {
            padding: 0rpx 24rpx;
            .goods-content {
                border-bottom: 1px solid #E6E7EB;
              
            }
            &:last-child {
                .goods-content {
                    border-bottom-left-radius: px2rpx(6);
                    border-bottom-right-radius: px2rpx(6);
                    border-bottom: none;
                }
            }
        }

        .lose-main {
            padding: px2rpx(8) px2rpx(12) 0;

            .lose-container {
                overflow: hidden;
                border-radius: px2rpx(6);
                background:#fff;
            }

            .lose-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: px2rpx(40);
                padding: 0 px2rpx(12);

                &-left {
                    font-size: px2rpx(14);
                    line-height: px2rpx(20);
                    color: #212121;
                }

                &-right {
                    border: px2rpx(1) solid #E6E7EB;
                    border-radius: px2rpx(40);
                    width: px2rpx(102);
                    height: px2rpx(27);
                    line-height: px2rpx(27);
                    font-size: px2rpx(12);
                    text-align: center;
                    color: #212121;
                }
            }
        }
        .goods-single-box {
            border-radius: px2rpx(6);
        }
        .full-reduce-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: px2rpx(10) px2rpx(12) px2rpx(3) px2rpx(12);
            background-color: #ffffff;
            margin: 0 px2rpx(12);
            border-top-left-radius: px2rpx(6);
            border-top-right-radius: px2rpx(6);
            .activity-content {
                flex: 1;
                width: 0;
                display: flex;
                align-items: center;
            }
            .label-tag {
                font-size: px2rpx(10);
                line-height: px2rpx(12);
                color: $uni-color-primary;
                border: px2rpx(1) solid #FF3C29;
                border-radius: px2rpx(2);
                padding: 0 px2rpx(2);
                display: inline-block;
            }
            .activity-rule {
                font-size: px2rpx(12);
                line-height: px2rpx(17);
                color: $color-w1;
                font-weight: bold;
                padding-left: px2rpx(4);
            }
            .activity-btn {
                display: flex;
                align-items: center;
                font-size: px2rpx(12);
                color: $uni-color-primary;
                flex-shrink: 0;
                padding-left: px2rpx(6);
                height: px2rpx(16);
                line-height: px2rpx(16);
                >i {
                    display: inline-block;
                    font-size: px2rpx(16);
                }
                >span {
                    margin-bottom: px2rpx(1);
                }
            }
        }
    }
</style>
